<template>
	<div>
		<van-nav-bar title="标题" left-text="返回" left-arrow @click-left="onClickLeft">
			<template #title>
				<van-search v-model="searchValue" placeholder="请输入搜索关键词" @search="SearchFoods" />
			</template>
		</van-nav-bar>

		<div class="search-history">
			<van-divider>搜索历史</van-divider>

			<van-tag
				closeable
				size="medium"
				type="primary"
				@close="removeSearchHistory(item)"
				v-for="(item, index) in SearchHistory"
				:key="index"
				@click="SearchFoods(item)"
			>
				{{ item }}
			</van-tag>
		</div>
		<BaseRecommend></BaseRecommend>
	</div>
</template>

<script>
import BaseRecommend from '@/components/common/BaseRecommend.vue';
import { getSearchHistory, setSearchHistory, removeSearchHistory } from '@/utils/cache';
import {} from '@/api/menu';
export default {
	components: {
		BaseRecommend,
	},
	data() {
		return {
			searchValue: '',
			SearchHistory: [],
		};
	},
	mounted() {
		this.SearchHistory = getSearchHistory();
	},
	methods: {
		/** @method 搜索菜谱 */
		SearchFoods(value) {
			// 判断是否为合法内容
			if (!value) {
				this.$toast('请输入搜索关键词');
				return;
			}
			// 正则判断是否为汉字
			if (!value.match(/^[\u4e00-\u9fa5]+$/)) {
				this.$toast('请输入合法内容');
				return;
			}

			// 添加搜索历史
			setSearchHistory(value);
			// 清空搜索值
			this.searchValue = '';

			// 这里业务逻辑
			this.$router.push({
				path: `/FoodClassificationLists/${value}`,
			});
		},
		/** @method 删除搜索历史 */
		removeSearchHistory(item) {
			removeSearchHistory(item);
			this.SearchHistory = getSearchHistory();
		},
	},
};
</script>

<style scoped>
.van-tag {
	margin: 0px 10px;
}
</style>
